<template>
  <div class="el-header">
    <div class="main_content">
      <div class="main_left">
        <vuedraggable
          class="list"
          v-model="list1"
          group="sortlist"
          @sort="sort"
          :options="dragOptions"
        >
          <div
            v-for="item in list1"
            :key="item.id"
            class="item"
            :style="{ background: colorList[item.level] }"
          >{{ item.id }}</div>
          <div v-for="item in 2" :key="item.id" style="width: 80px; height: 0"></div>
        </vuedraggable>
      </div>
      <div class="main_right">
        <vuedraggable class="list" v-model="list2" group="sortlist" :options="dragOptions">
          <div
            v-for="item in list2"
            :key="item.id"
            class="item"
            :style="{ background: colorList[item.level] }"
          >{{ item.id }}</div>
          <div v-for="item in 2" :key="item.id" style="width: 80px; height: 0"></div>
        </vuedraggable>
      </div>
    </div>
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";
export default {
  components: {
    vuedraggable,
  },
  data() {
    return {
      dragOptions: {
        animation: 120,
        scroll: true,
        group: "sortlist",
        ghostClass: "ghost-style",
        sort: true,
      },
      colorList: ["#33c273", "#fc594f", "#f6e741", "#ff892e"],
      list1: [
        { id: 16, level: 3, val: 3 },
        { id: 12, level: 3, val: 3 },
        { id: 13, level: 2, val: 2 },
        { id: 41, level: 0, val: 0 },
        { id: 15, level: 1, val: 1 },
        { id: 17, level: 2, val: 2 },
        { id: 18, level: 3, val: 3 },
        { id: 11, level: 0, val: 0 },
      ],
      list2: [
        { id: 1, level: 3, val: 3 },
        { id: 2, level: 3, val: 3 },
        { id: 3, level: 2, val: 2 },
        { id: 4, level: 0, val: 0 },
        { id: 5, level: 1, val: 1 },
        { id: 7, level: 2, val: 2 },
        { id: 8, level: 3, val: 3 },
        { id: 11, level: 1, val: 1 },
      ],
    };
  },
  methods: {
    sort() {
      this.list1.sort((a, b) => a.id - b.id);
      this.list2.sort((a, b) => a.id - b.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  padding: 30px;
  .main_content {
    height: 520px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .main_left {
      width: 430px;
      height: 100%;
      background-color: #f0f2f7;
      border-radius: 8px;
      padding: 30px 0;
      box-sizing: border-box;
    }
    .main_right {
      width: 430px;
      height: 100%;
      background-color: #f0f2f7;
      border-radius: 8px;
      padding: 30px 0;
      box-sizing: border-box;
      border-radius: 8px;
    }

    .list {
      padding: 0 30px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: flex-start;
      overflow: scroll;
      height: 400px;
    }
    .item {
      font-size: 24px;
      color: #3e4145;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      line-height: 80px;
      text-align: center;
      margin-top: 20px;
      position: relative;
    }
  }
}
</style>
